<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mdb文件批量转Excel</title>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <!--vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body style="width: 99%;text-align: center">
<div id="push2">
    <div style="width: 60%;display: inline-block;text-align: left">
        <h1 style="width: 100%;text-align: center">mdb文件批量转Excel</h1>
        <el-form>
            <el-form-item label="mdb地址">
                <el-input v-model="path" placeholder="比如: D:\test 或者 D:\test\aaa.mdb"></el-input>
            </el-form-item>
            <el-form-item label="导出地址">
                <el-input v-model="outPath" placeholder="比如: D:\testout"></el-input>
            </el-form-item>
            <el-form-item label="导出表">
                <el-input v-model="tableName" placeholder="不填写默认导出所有表的数据. 比如: 测试数据  "></el-input>
            </el-form-item>
        </el-form>
    </div>
    <div>
        <el-button @click="exportAll" type="primary">导出</el-button>
    </div>
    <div @click="dialogVisible=true" style="position: absolute;left: 2%;bottom: 1%;display: inline-block"
         @mouseover="dialogVisible=true">
        <h2 style="margin-bottom: 20px;color:#606266;">支持一下</h2>
        <div style="margin: 20px;font-size: 12px;color:#606266;">可以扫码领红包，然后用红包支持(*^_^*)</div>
        <div>
            <el-image style="height: 100px" src="./img/shou1.jpg" fit></el-image>
            <el-image style="height: 100px" src="./img/pay.jpg" fit></el-image>
        </div>
        <div style="color:#c0c4cc;">点击放大</div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="800px">
        <div style="margin: 20px 0">
            <h2>支持一下</h2>
            <div style="margin: 20px">可以扫码领红包，然后用红包支持(*^_^*)</div>
            <div>
                <el-image style="height: 400px" src="./img/shou1.jpg" fit></el-image>
                <el-image style="height: 400px" src="./img/pay.jpg" fit></el-image>
            </div>

        </div>

    </el-dialog>
</div>
</body>
<script type="application/javascript">

    let data1 = new Vue({
        el: '#push2',
        data() {
            return {
                path: '',
                outPath: '',
                tableName: '',
                dialogVisible: false

            }
        },

        methods: {

            exportAll() {
                let _this = this;
                let data = {
                    path: _this.path,
                    outPath: _this.outPath,
                    tableName: this.tableName
                }
                $.ajax({
                    type: "POST", url: '/export1', data: JSON.stringify(data),
                    contentType: 'application/json', dataType: 'json'
                }).done(function (data) {
                    console.log("Got answer: ", data);
                    if (data.success) {
                        _this.$message.success("转换成功");
                    } else {
                        _this.$message.error(data.hint);
                    }
                }).fail(function (reason) {
                });
            },
        },
        created() {
        },
        mounted() {
        },
        watch: {},
        destroyed() {
        }


    })

</script>
</html>